import { NInput, NSelect, NDatePicker, NButton } from "naive-ui";

import { ColumnsConfig } from "./type";

export const filterControlsMap: any = {
    input: {
        dom: NInput,
        conf: () => {},
    },
    select: {
        dom: NSelect,
        conf: (col: ColumnsConfig) => {
            return { ...col.filterControl };
        },
    },
    date: {
        dom: NDatePicker,
        conf: (col: ColumnsConfig) => {
            return {
                ...col.filterControl,
                type: col.filterControl?.type || "date",
            };
        },
    },
};

const filterControl = defineComponent({
    props: {
        col: Object,
        handleOnClick: Function,
        actionFun: Function,
    },
    setup(props: any) {
        const curValue = ref(props.col.filterControl.value);
        const domRef: any = ref(null);
        function handleOnClick() {
            props.handleOnClick &&
                props.handleOnClick(curValue.value, props.col);
            props.actionFun && props.actionFun.hide();
        }
        function handleResize() {
            curValue.value = null;
            props.col.filterControl.value = null;
            handleOnClick();
        }
        return () =>
            h("div", { class: "filter-control" }, [
                h(
                    "div",
                    { class: "filter-control-area" },
                    h(filterControlsMap[props.col.filterControlType].dom, {
                        ...filterControlsMap[props.col.filterControlType].conf(
                            props.col,
                        ),
                        value: curValue.value,
                        ref: domRef,
                        onUpdateValue: (v: any) => {
                            curValue.value = v;
                        },
                    }),
                ),
                h("div", { class: "filter-control-action" }, [
                    h(
                        NButton,
                        {
                            size: "tiny",
                            onClick: handleResize,
                        },
                        "重置",
                    ),
                    h(
                        NButton,
                        {
                            type: "primary",
                            size: "tiny",
                            style: {
                                marginLeft: "10px",
                            },
                            onClick: handleOnClick,
                        },
                        "确定",
                    ),
                ]),
            ]);
    },
});
export const getFilterControl = (
    col: ColumnsConfig,
    actionFun: any,
    filterFun: any,
) => {
    return h(filterControl, {
        col: col,
        handleOnClick: filterFun,
        actionFun,
    });
};
